<template>
<div>
    <addcommodityspec v-if="isAddSpecDlg" v-on:closeAddcommodityspec="closeDlgHandler()" :productId="selId"></addcommodityspec>
    <editorcommodityproperty v-if="isEditorSpecDlg" v-on:closeAddcommodityproperty="closeDlgHandler()" 
            :productId="selId" :price="price" :storage="storage" :thumb="thumb"
             :specIds="specIds" :edid="edid" v-on:updateProductProperty="updateProductProperty()">
            </editorcommodityproperty>
    <addcommodityspeczip v-if="isAddSpecZipDlg" v-on:closeAddcommodityspeczip="closeDlgHandler()" :productId="selId"></addcommodityspeczip>
    <addcommodityproperty v-if="isAddProDlg" v-on:closeAddcommodityproperty="closeDlgHandler()" :productId="selId" v-on:addcommodityproperty="addcommodityproperty()"></addcommodityproperty>
    <el-dialog
        title="商品类型列表"
         :visible.sync="isDlgShow"
        v-on:close="closeHandler()"
        width="50%"
        center>
        <span>
            <el-table
            :data="commodityspecdata"
            style="width: 100%"
            height="420"
            v-loading="loading"
            stripe
            border
            >
            <el-table-column
              fixed
              prop="id"
              label="商品ID"
              width="200">
            </el-table-column>
            <el-table-column
              label="规格列表"
              width="150">
                <template slot-scope="scope">
                    <el-tag>规格列表:{{scope.row.specIds.length}}个</el-tag>
                </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格"
              width="150">
            </el-table-column>
            <el-table-column
              prop="storage"
              label="库存"
              width="100">
            </el-table-column>
            <el-table-column
              label="缩略图"
              width="100">
                <template slot-scope="scope">
                    <el-popover
                    placement = "bottom"
                    trigger="hover"
                    width="250"
                    height="150">
                    <div style="text-align: right; margin: 0">
                        <img v-bind:src="scope.row.thumb" width="250" height="150"/>
                    </div>
                       <img slot="reference" v-bind:src="scope.row.thumb" width="40" height="40"/>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
              prop="operate"
              label="操作"
              width="150">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
          </el-table>
          
        </span>
        <span> 
            <el-row  class="pageBar">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pagesize"
                layout="prev, pager, next, jumper"
                :total="count">
            </el-pagination>
            </el-row>
    </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="openAddcommodityspeczip()">添加规格目录</el-button>
            <el-button @click="openAddcommodityspec()">添加规格</el-button>
            <el-button @click="openAddProductProperty()">添加商品类型</el-button>
        </span>
    </el-dialog>
    </div>
</template>
<script>
import addcommodityspeczip from "./addcommodityspeczip";
import addcommodityspec from "./addcommodityspec";
import addcommodityproperty from "./addcommodityproperty";
import editorcommodityproperty from "./editorcommodityproperty";

export default {
    props: ["selId"],
    created() {
        this.reflushHandler();
    },
    name: "commodityspec",
    components: {
        addcommodityspec: addcommodityspec,
        addcommodityspeczip: addcommodityspeczip,
        addcommodityproperty: addcommodityproperty,
        editorcommodityproperty: editorcommodityproperty
    },
    data() {
        return {
            isDlgShow: true,
            isEditorSpecDlg: false,
            isAddSpecDlg: false,
            isAddSpecZipDlg: false,
            isAddProDlg: false,
            admin: this.$persistence.get("admin"),
            currentPage: 1,
            pagesize: 4,
            count: 0,
            inputtxt: "",
            commodityspecdata: [],
            loading: true,
            price: null,
            storage: null,
            thumb: "",
            specIds: [],
            edid: null
        };
    },
    methods: {
        updateProductProperty() {
            this.reflushHandler();
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.reflushHandler();
        },
        addcommodityproperty() {
            this.reflushHandler();
        },
        closeHandler() {
            this.isDlgShow = false;
            this.isAddSpecDlg = false;
            this.isAddSpecZipDlg = false;
            this.isAddProDlg = false;
            this.$emit("close-hdl");
        },
        reflushHandler() {
            this.findProductProperty((this.currentPage - 1) * this.pagesize, this.pagesize);
        },
        findProductProperty(skip, take) {
            this.$axiosPost(
                "/AdminService/findProductProperty",
                {
                    session: this.admin.session,
                    opts: {
                        where: {
                            productId: this.selId
                        },
                        skip: skip,
                        take: take
                    }
                },
                response => {
                    this.count = response.data.count;
                    this.commodityspecdata = this.formatProductPropertyList(response.data.list);
                    this.loading = false;
                },
                error => {
                    this.loading = false;
                }
            );
        },
        closeDlgHandler() {
            this.isAddSpecDlg = false;
            this.isAddSpecZipDlg = false;
            this.isAddProDlg = false;
            this.isEditorSpecDlg = false;
        },
        handleEdit(index, row) {
            this.edid = row.id;
            this.price = row.price;
            this.storage = row.storage;
            this.thumb = row.thumb;
            this.specIds = row.specIds;
            this.isEditorSpecDlg = true;
        },
        handleDelete(index, row) {
            const id = row.id;
            this.$confirm("此操作将永久删除该商品类型, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$axiosPost(
                    "/AdminService/deleteProductProperty",
                    {
                        session: this.admin.session,
                        productPropertyId: id
                    },
                    response => {
                        if (response.data.ok) {
                            this.$message({
                                message: "删除成功",
                                type: "warning"
                            });
                            this.reflushHandler();
                        }
                    }
                );
            });
        },
        openAddProductProperty() {
            this.isAddProDlg = true;
        },
        openAddcommodityspec() {
            this.isAddSpecDlg = true;
        },
        openAddcommodityspeczip() {
            this.isAddSpecZipDlg = true;
        },
        formatProductPropertyList(list) {
            let userlist = [];
            for (let index = 0; index < list.length; index++) {
                const element = list[index];
                userlist.push({
                    id: element.id,
                    thumb: element.thumb,
                    storage: element.storage,
                    price: element.price,
                    specIds: element.specIds.split(",")
                });
            }
            return userlist;
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.pageBar {
    margin-top: 5px;
    text-align: center;
}
</style>